<template>
  <el-form :model="form" label-width="120px">
    <el-tabs type="border-card" class="demo-tabs">
      <el-tab-pane>
        <template #label>
          <span class="custom-tabs-label">
            <el-icon><calendar /></el-icon>
            <span>基础配置</span>
          </span>
        </template>

        <JmInput
          jmname="站点名称"
          v-model="form.site_name"
          placeholder="sad"
          type="text"
        ></JmInput>
        <JmInput
          jmname="备案号"
          v-model="form.beian"
          placeholder="sad"
          type="text"
        ></JmInput>
      </el-tab-pane>
      <el-tab-pane label="邮箱配置">
        <JmInput
          jmname="邮件发送方式"
          v-model="form.mail_type"
          placeholder="sad"
          remark="备注"
          disabled="disabled"
          type="text"
        ></JmInput>

        <JmInput
          jmname="服务器"
          v-model="form.mail_smtp_host"
          placeholder="sad"
          remark="备注"
          type="text"
        ></JmInput>

        <JmInput
          jmname="端口"
          v-model="form.mail_smtp_port"
          placeholder="sad"
          remark="备注"
          type="text"
        ></JmInput>

        <JmInput
          jmname="用户名"
          v-model="form.mail_smtp_user"
          placeholder="sad"
          remark="备注"
          type="text"
        ></JmInput>

        <JmInput
          jmname="密码"
          v-model="form.mail_smtp_pass"
          placeholder="sad"
          remark="备注"
          type="text"
        ></JmInput>

        <JmInput
          jmname="验证方式"
          v-model="form.mail_smtp_user"
          placeholder="sad"
          remark="备注"
          type="text"
        ></JmInput>
        <JmEnum
          jmname="验证方式"
          v-model="form.mail_verify_type"
          :jv="{ 1: 'TLS', 2: 'SSL' }"
          jtype="3"
          br
        ></JmEnum>

        <JmInput
          jmname="发件人邮箱"
          v-model="form.mail_smtp_user"
          placeholder="sad"
          remark="备注"
          type="text"
        ></JmInput>
      </el-tab-pane>
      <el-tab-pane label="示例配置"> </el-tab-pane>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">Create</el-button>
        <el-button>Cancel</el-button>
      </el-form-item>
    </el-tabs>
  </el-form>
</template>
 
<script>
import JmInput from "../../../components/form/JmInput.vue";
import JmEnum from "../../../components/form/JmEnum.vue";
export default {
  components: { JmInput, JmEnum },
  data() {
    return {
      form: {
        site_name: "1",
        beian: "",
        mail_type: "",
        configgroup: {},
        mail_smtp_host: "",
        mail_smtp_port: "",
        mail_smtp_user: "",
        mail_smtp_pass: "",
        mail_verify_type: "1",
        mail_from: "",
      },
    };
  },

  mounted() {
    this.getDataList();
  },
  methods: {
    // 配置信息列表初始化
    async getDataList() {
      try {
        const res = await this.$api.getConfigList(); 

        this.form.site_name = res.siteList.site_name.value;

        this.form.beian = res.siteList.beian.value;

        this.form.configgroup = res.siteList.configgroup.value;

        this.form.mail_type = res.siteList.mail_type.value;

        this.form.mail_smtp_host = res.siteList.mail_smtp_host.value;

        this.form.mail_smtp_port = res.siteList.mail_smtp_port.value;

        this.form.mail_smtp_user = res.siteList.mail_smtp_user.value;

        this.form.mail_smtp_pass = res.siteList.mail_smtp_pass.value;

        this.form.mail_verify_type = res.siteList.mail_verify_type.value;

        this.form.mail_from = res.siteList.mail_from.value;

      } catch (error) {
        /*console.error(error);*/
      }
    },
    onSubmit() {
      //  console.log(this.form);
      const res = this.$api.setConfigList(this.form);

      console.log(res);
    },
  },
};
</script>
<style>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.demo-tabs .custom-tabs-label .el-icon {
  vertical-align: middle;
}
.demo-tabs .custom-tabs-label span {
  vertical-align: middle;
  margin-left: 4px;
}
</style>